<template>
  <div class="p-3 flex">
    <div class="w-12/20 ml-1">
      <CustomerCard :card-data="instrumentPanel" />
    </div>
    <div class="w-8/20 flex flex-col">
      <div class="m-1 2/6"><CustomerCard :card-data="alarmData" /></div>
      <div class="m-1 2/6"><CustomerCard :card-data="deviceData" /></div>
      <div class="m-1 1/6"><CustomerCard :card-data="linkData" /></div>
      <div class="m-1 1/6"><CustomerCard :card-data="documentData" /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import CustomerCard from './CustomerCard.vue';
  import { useWebSocket } from '@vueuse/core';
  let alarmData = ref<any>({
    title: '告警',
    go: true,
    addText: '',
    value: [
      {
        title: '严重',
        color: '#FDF7F7',
        icon: 'solar:danger-triangle-bold',
        data: 4,
      },
      {
        title: '分配给我',
        color: '#F7F8FA',
        icon: '',
        data: 5,
      },
      {
        title: '总数',
        color: '#FCFCFC',
        icon: '',
        data: 6,
      },
    ],
    type: 'number',
  });
  let deviceData = ref<any>({
    title: '设备',
    go: true,
    addText: '查看文档',
    value: [
      {
        title: '活动',
        color: '#FDF7F7',
        icon: '',
        data: 7,
      },
      {
        title: '未活动',
        color: '#F7F8FA',
        icon: '',
        data: 4,
      },
      {
        title: '总数',
        color: '#FCFCFC',
        icon: '',
        data: 54,
      },
    ],
    type: 'number',
  });
  let linkData = ref<any>({
    title: '快速链接',
    go: false,
    addText: '编辑',
    value: [
      { name: '警报', icon: '111' },
      { name: '仪表板', icon: '111' },
      { name: '设备', icon: '111' },
      { name: '警报', icon: '111' },
      { name: '所有客户', icon: '111' },
    ],
    icon: '',
    type: 'Array',
  });
  let documentData = ref<any>({
    title: '文档',
    go: true,
    addText: '编辑',
    value: [{ name: 'Getting started', icon: '111' }],
    icon: '',
    type: 'Array',
  });
  let instrumentPanel = ref<any>({
    title: '仪表盘',
    go: true,
    addText: '',
    value: '暂无最近查看的仪表盘',
    icon: '',
    type: 'select',
  });
  let send1 = {
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'DEVICE',
          },
        },
        cmdId: 4,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'DEVICE',
          },
          keyFilters: [
            {
              key: {
                type: 'SERVER_ATTRIBUTE',
                key: 'active',
              },
              valueType: 'BOOLEAN',
              predicate: {
                operation: 'EQUAL',
                value: {
                  defaultValue: true,
                  dynamicValue: null,
                },
                type: 'BOOLEAN',
              },
            },
          ],
        },
        cmdId: 5,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'DEVICE',
          },
          keyFilters: [
            {
              key: {
                type: 'SERVER_ATTRIBUTE',
                key: 'active',
              },
              valueType: 'BOOLEAN',
              predicate: {
                operation: 'EQUAL',
                value: {
                  defaultValue: false,
                  dynamicValue: null,
                },
                type: 'BOOLEAN',
              },
            },
          ],
        },
        cmdId: 6,
      },
    ],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [
      {
        query: {
          statusList: ['ACTIVE'],
          searchPropagatedAlarms: false,
        },
        cmdId: 1,
      },
      {
        query: {
          statusList: ['ACTIVE'],
          searchPropagatedAlarms: false,
          assigneeId: {
            entityType: 'USER',
            id: '5b946c20-9b1b-11ee-9f1d-2f70aa1d7dac',
          },
        },
        cmdId: 2,
      },
      {
        query: {
          severityList: ['CRITICAL'],
          statusList: ['ACTIVE'],
          searchPropagatedAlarms: false,
        },
        cmdId: 3,
      },
    ],
    alarmCountUnsubscribeCmds: [],
  };
  // 在任意Vue组件内
  const wsUrl = 'ws://47.110.73.94:1523/api/ws/plugins/telemetry?token=';
  const token: any = localStorage.getItem('jwt_token');

  const { data, send } = useWebSocket(`${wsUrl}${token}`, {
    autoClose: false,
    autoReconnect: false,
    heartbeat: false,
    onMessage: () => {
      let res = JSON.parse(data.value);
      if (res.cmdUpdateType === 'COUNT_DATA' && res.cmdId === 4) {
        deviceData.value.value[0].data = res.count;
      }
      if (res.cmdUpdateType === 'COUNT_DATA' && res.cmdId === 5) {
        deviceData.value.value[1].data = res.count;
      }
      if (res.cmdUpdateType === 'COUNT_DATA' && res.cmdId === 6) {
        deviceData.value.value[2].data = res.count;
      }
      if (res.cmdUpdateType === 'ALARM_COUNT_DATA' && res.cmdId === 1) {
        alarmData.value.value[0].data = res.count;
      }
      if (res.cmdUpdateType === 'ALARM_COUNT_DATA' && res.cmdId === 2) {
        alarmData.value.value[1].data = res.count;
      }
      if (res.cmdUpdateType === 'ALARM_COUNT_DATA' && res.cmdId === 3) {
        alarmData.value.value[2].data = res.count;
      }
    },
  });
  onMounted(() => {
    send(JSON.stringify(send1));
  });
</script>
